<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu>
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item v-for="(route, index) in filteredRoutes" :key="index" :index="route.path"
          :default-active="$route.path" @click="navigateTo(route.path)">
          <i :class="route.icon"></i>
          <span slot="title">{{ route.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<style scoped></style>

<script>
import routes from '../router/routes';

const filteredRoutes = routes.filter(route => {
  return route.path !== '/userLogin' && route.path !== '/userRegister'
    && route.path !== '/userInformationDialog' && route.path !== '/addNews'
    && route.path !== '/newsDetail' && route.name !== '新闻详情'
    && route.path !== '/search'
});

export default {
  data() {
    return {
      routes: routes,
      filteredRoutes: filteredRoutes,
    };
  },
  methods: {
    navigateTo(routePath) {
      const currentPath = this.$router.currentRoute.path;
      if (currentPath !== routePath) {
        this.$router.push(routePath);
        console.log(routePath);
      }
    },
  }
};
</script>